import React from "react";
import { Carousel, CarouselProps } from "./index";
import { Story, Meta } from '@storybook/react/types-6-0';

export default {
	title: "Example/Carousel",
	component: Carousel,
} as Meta;

const DivExample = function(height: number, index: number) {
	return (
		<div
			style={{
				background: "#364d79",
			}}
    	key={index}
		>
			<span
				style={{
					lineHeight: `${height}px`,
					color: "white",
					fontSize: "20px",
					fontWeight: 800,
					width: "100%",
					textAlign: "center",
					display: "inline-block",
				}}
			>
				{index + 1}
			</span>
		</div>
	);
};

const Template: Story<CarouselProps> = (args) => <Carousel {...args} >
  {new Array(4).fill(300).map((v, i) => DivExample(v, i))}
</Carousel>;

export const Primary = Template.bind({});
Primary.args = {
  defaultIndex: 2,
  autoplayDelay: 3000,
  delay: 300,
  height: 300
};
